<template>
  <div v-if="easyFlowVisible" style="height: calc(100vh)">
    <el-row>
      <!--顶部工具菜单-->
      <el-col :span="24">
        <div class="ef-tooltar">
          <el-link type="primary" :underline="false">{{ tablename }}</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-button
              type="text"
              icon="el-icon-delete"
              size="large"
              @click="deleteElement"
              :disabled="!this.activeElement.type"
          ></el-button>
          <el-divider direction="vertical"></el-divider>
          <!--                    <el-button type="text" icon="el-icon-download" size="large" @click="downloadData"></el-button>-->
          <!--                    <el-divider direction="vertical"></el-divider>-->
          <el-button
              type="text"
              icon="el-icon-plus"
              size="large"
              @click="zoomAdd"
          ></el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button
              type="text"
              icon="el-icon-minus"
              size="large"
              @click="zoomSub"
          ></el-button>
          <div style="float: right; margin-right: 5px">
<!--            <el-button-->
<!--                type="info"-->
<!--                plain-->
<!--                round-->
<!--                icon="el-icon-document"-->
<!--                @click="dataInfo"-->
<!--                size="mini"-->
<!--            >流程信息-->
<!--            </el-button-->
<!--            >-->
            <!--                        <el-button type="primary" plain round @click="dataReloadA" icon="el-icon-refresh" size="mini">切换流程A</el-button>-->
            <!--                        <el-button type="primary" plain round @click="dataReloadB" icon="el-icon-refresh" size="mini">切换流程B</el-button>-->
            <!--                        <el-button type="primary" plain round @click="dataReloadC" icon="el-icon-refresh" size="mini">切换流程C</el-button>-->
            <!--                        <el-button type="primary" plain round @click="dataReloadD" icon="el-icon-refresh" size="mini">自定义样式</el-button>-->
            <!--                        <el-button type="primary" plain round @click="dataReloadE" icon="el-icon-refresh" size="mini">力导图</el-button>-->
            <el-button
                type="info"
                plain
                round
                icon="el-icon-document"
                @click="openHelp"
                size="mini"
            >帮助
            </el-button
            >
            <el-button
                type="info"
                plain
                round
                icon="el-icon-document"
                @click="save"
                size="mini"
            >保存
            </el-button
            >
            <el-button
                type="primary"
                plain
                round
                v-if="launchStatus===0"
                icon="el-icon-document"
                @click="fabu(1)"
                size="mini"
            >发布流程
            </el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="display: flex; height: calc(100% - 47px)">
      <div style="width: 230px; border-right: 1px solid #dce3e8">
        <node-menu @addNode="addNode" ref="nodeMenu"></node-menu>
      </div>
      <div id="efContainer" ref="efContainer" class="container" v-flowDrag>
        <template v-for="node in data.nodeList">
          <flow-node
              :id="node.id"
              :key="node.id"
              :node="node"
              :activeElement="activeElement"
              @changeNodeSite="changeNodeSite"
              @nodeRightMenu="nodeRightMenu"
              @clickNode="clickNode(node)"
          ></flow-node>
        </template>
        <!-- 给画布一个默认的宽度和高度 -->
        <div style="position: absolute; top: 2000px; left: 2000px">&nbsp;</div>
      </div>
      <!-- 右侧表单 -->
      <div style="width: 300px; border-left: 1px solid #dce3e8">
        <flow-node-form
            ref="nodeForm"
            @setLineLabel="setLineLabel"
            @repaintEverything="repaintEverything"
        ></flow-node-form>
      </div>
    </div>
    <!-- 流程数据详情 -->
    <flow-info v-if="flowInfoVisible" ref="flowInfo" :data="data"></flow-info>
    <flow-help v-if="flowHelpVisible" ref="flowHelp"></flow-help>

  </div>
</template>

<script>
import draggable from "vuedraggable";
// import { jsPlumb } from 'jsplumb'
// 使用修改后的jsplumb
import "./jsplumb";
import {easyFlowMixin} from "@/components/ef/mixins";
import flowNode from "@/components/ef/node";
import nodeMenu from "@/components/ef/node_menu";
import FlowInfo from "@/components/ef/info";
import FlowHelp from "@/components/ef/help";
import FlowNodeForm from "./node_form";
import lodash from "lodash";
import {getDataA} from "./data_A";
import {getDataB} from "./data_B";
import {getDataC} from "./data_C";
import {getDataD} from "./data_D";
import {getDataE} from "./data_E";
import {ForceDirected} from "./force-directed";
import {api} from "@/server/api";

export default {
  data() {
    return {
      tableId:null,
      flowVersion: null,
      launchStatus:null,
      ruleForm:{},
      tablename: "",
      // jsPlumb 实例
      jsPlumb: null,
      // 控制画布销毁
      easyFlowVisible: true,
      // 控制流程数据显示与隐藏
      flowInfoVisible: false,
      // 是否加载完毕标志位
      loadEasyFlowFinish: false,
      flowHelpVisible: false,
      // 数据
      data: {},
      fieldLst: [],
      // 激活的元素、可能是节点、可能是连线
      activeElement: {
        // 可选值 node 、line
        type: undefined,
        // 节点ID
        nodeId: undefined,
        isdelet: false,
        name: "",
        // 连线ID
        sourceId: undefined,
        targetId: undefined,
      },
      zoom: 0.5,
    };
  },
  // 一些基础配置移动该文件中
  mixins: [easyFlowMixin],
  components: {
    draggable,
    flowNode,
    nodeMenu,
    FlowInfo,
    FlowNodeForm,
    FlowHelp,
  },
  directives: {
    flowDrag: {
      bind(el, binding, vnode, oldNode) {
        if (!binding) {
          return;
        }
        el.onmousedown = (e) => {
          if (e.button == 2) {
            // 右键不管
            return;
          }
          //  鼠标按下，计算当前原始距离可视区的高度
          let disX = e.clientX;
          let disY = e.clientY;
          el.style.cursor = "move";

          document.onmousemove = function (e) {
            // 移动时禁止默认事件
            e.preventDefault();
            const left = e.clientX - disX;
            disX = e.clientX;
            el.scrollLeft += -left;

            const top = e.clientY - disY;
            disY = e.clientY;
            el.scrollTop += -top;
          };

          document.onmouseup = function (e) {
            el.style.cursor = "auto";
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  mounted() {
    // console.log( this.$route.query.flowVersion)
    // if( this.$route.query.flowVersion!=undefined){
    //
    // }else{
    //   this.getMapdetail()
    // }

  },

  methods: {
    getflfromflow(){
      this.ruleForm={};
      this.flowVersion = this.$route.query.flowVersion;
      this.tablename = this.$route.query.name;
      this.tableId= this.$route.query.tableId;
      this.jsPlumb = jsPlumb.getInstance();
      this.getlist();
      this.$nextTick(() => {
        // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
        // this.dataReload(getDataC());
      });
    },
    getMapdetail(res){
      this.ruleForm=res;
      console.log(this.ruleForm)
      if(this.ruleForm.flowTblId){
        this.tableId= this.ruleForm.flowTblId;
        this.flowVersion =this.ruleForm.flowVersion
        this.tablename = this.ruleForm.mapName;
        this.jsPlumb = jsPlumb.getInstance();
        this.getlist();
        this.$nextTick(() => {
        });
      }

    },
    getlist() {
      api.stdflowFlowDetail({
            tableId: this.tableId,
            flowVersion: this.flowVersion > 1 ? this.flowVersion - 1 : this.flowVersion,
          })
          .then((res) => {
            console.log(res);
            console.log(this.node);
            const {fieldLst, nodeResLst} = res;
            let list = [];
            let editlist = [];
            if(fieldLst){
              fieldLst.map((val) => {
                if (val.fieldType != "IdentityKey") {
                  let obj = {
                    fieldName: val.fieldName,
                    fieldId: val.fieldId,
                    isShow: true,
                    canEdit: true,
                  };
                  let objs = {
                    fieldName: val.fieldName,
                    fieldId: val.fieldId,
                    isShow: false,
                    canEdit: false,
                  };
                  editlist.push(objs)
                  list.push(obj);
                }
              });
              this.fieldLst = list;
            }else{
              this.fieldLst = null;
              this.editlist=null;
            }
            if (nodeResLst.length > 0) {
              this.editFlow(nodeResLst, editlist)
              //详情
            } else {
              //新增
              this.addFlow(this.fieldLst)
            }
            //   this.node.fildList = this.fieldLst;
          });
    },
    addFlow(fieldLst) {
      console.log(fieldLst)
      let arr = getDataC()
      arr.nodeList.forEach(val => {
        val.fildList = fieldLst
      })
      this.dataReload(arr);
    },
    editFlow(nodeResLst, fieldLst) {
      //第一判断有没有分支几点branchNo
      const finndvalue = nodeResLst.filter(val => {
        return (val.branchNo && val.branchNo >= 0)
      })
      if (finndvalue.length > 0) {
        //有分支
      } else {
        this.nodOther(nodeResLst, fieldLst)
        //没有分支
      }

    },
    nodOther(nodeResLst, fieldLst) {
      let flowlist = {
        name: this.$route.query.name
      }
      nodeResLst.forEach(val => {
        val.fildList = fieldLst
        val.fieldAuthority = JSON.parse(val.fieldAuthority)
      })
      let arr=JSON.parse(JSON.stringify(nodeResLst))
      for(let i in arr) {
        let fieldAuthority = arr[i].fieldAuthority;
        let fildList = arr[i].fildList;
        for(var fA_i in fieldAuthority){
          for(var fL_i in fildList)
            if(fieldAuthority[fA_i].fieldId == fildList[fL_i].fieldId){
              // do..
              fildList[fL_i].isShow = fieldAuthority[fA_i].isShow;
              fildList[fL_i].canEdit = fieldAuthority[fA_i].canEdit;
            }
        }
      }
      console.log(arr)
      arr.forEach(val => {
        if (val.nodeType == 0) {
          val.ico = "el-icon-video-play";
          val.id = "nodeA";
          val.left = "400px";
          val.name = val.nodeName;
          val.nodeType = 0;
          val.top = "15px";
          val.type = "task";
        }else{
          val.ico = "el-icon-goods";
          val.id = "nodeB"+val.parentNo+val.seqNo;
          val.left = "400px";
          val.name =val.nodeName;
          val.nodeType = 2;
          val.top =val.seqNo*100 +"px";
          val.type = "task";
        }
        const canEdit=val.fildList.filter(finvak=>{
           return finvak.canEdit===false
        })
        canEdit.length>0?val.alledit=false:val.alledit=true
        const isall=val.fildList.filter(finvak=>{
          return finvak.isShow===false
        })
        isall.length>0?val.allshow=false:val.allshow=true
      })
      let lineList=[];
      let obj={}
      arr.map((val,index,arr)=>{
        if(index<nodeResLst.length-1){
          obj={
            from:val.id,
            to:arr[index+1].id
          }
          lineList.push(obj)
        }
      })
      flowlist.lineList=lineList
      flowlist.nodeList=arr
      this.dataReload(flowlist);
    },
    fabu(flowVersion) {
      api.stdflowFlowLaunch({
        tableId: this.tableId,
        flowVersion: flowVersion,
      }).then(res => {
        this.$message.success("流程发布成功");
        setTimeout(() => {
          if(this.$route.query.tableId!=undefined){
             this.$router.go(-1)
          
          }else{
            this.$emit('changetable');
          }

        }, 100);
      })
    },
    save() {
      const {nodeList, lineList} = this.data;
      let arr = [];
      for (let i = 0; i < nodeList.length; i++) {
        const element = nodeList[i];
        if(this.ruleForm.flowTblId!=undefined){
          element.fildList=[]
        }else{
          if (element.fildList < 1) {
            this.$message({
              type: 'info',
              message: `请保存${element.name}字段权限`
            });
            return
          }
          element.fildList.map((item) => {
            return delete item.fieldName;
          });
        }

        console.log(element)
        let obj = {
          nodeType: element.nodeType,
          seqNo: i + 1,
          nodeName:element.name,
          parentNo: element.parentId,
          fieldAuthority: JSON.stringify(element.fildList),
        };
        // nodeList.seqNo = i + 1;
        for (let j = 0; j < lineList.length; j++) {
          const item = lineList[j];
          if (element.id === item.to) {
            obj.parentNo = i;
          }
        }

        arr.push(obj);
      }
      console.log(arr);
      let data = {
        tableId: this.tableId,
        flowVersion: this.flowVersion,
        nodeLst: arr,
      };
      api.stdflowFlowUpd(data).then((res) => {
        this.isfabu()
      });
    },
    isfabu() {
      this.$confirm('节点设置成功是否立刻发布？', '提示', {
        confirmButtonText: '发布',
        cancelButtonText: '取消',
        type: 'success',
        showClose: false
      }).then(() => {
        this.fabu(this.flowVersion)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });
    },
    // 返回唯一标识
    getUUID() {
      return Math.random().toString(36).substr(3, 10);
    },
    jsPlumbInit() {
      this.jsPlumb.ready(() => {
        // 导入默认配置
        this.jsPlumb.importDefaults(this.jsplumbSetting);
        // 会使整个jsPlumb立即重绘。
        this.jsPlumb.setSuspendDrawing(false, true);
        // 初始化节点
        this.loadEasyFlow();
        // 单点击了连接线, https://www.cnblogs.com/ysx215/p/7615677.html
        this.jsPlumb.bind("click", (conn, originalEvent) => {
          this.activeElement.type = "line";
          this.activeElement.sourceId = conn.sourceId;
          this.activeElement.targetId = conn.targetId;
          this.$refs.nodeForm.lineInit({
            from: conn.sourceId,
            to: conn.targetId,
            label: conn.getLabel(),
          });
        });
        // 连线
        this.jsPlumb.bind("connection", (evt) => {
          console.log(222)
          let from = evt.source.id;
          let to = evt.target.id;
          if (this.loadEasyFlowFinish) {
            this.data.lineList.push({from: from, to: to});
          }
        });
        // 删除连线回调
        this.jsPlumb.bind("connectionDetached", (evt) => {
          this.deleteLine(evt.sourceId, evt.targetId);
        });

        // 改变线的连接节点
        this.jsPlumb.bind("connectionMoved", (evt) => {
          this.changeLine(evt.originalSourceId, evt.originalTargetId);
        });

        // 连线右击
        this.jsPlumb.bind("contextmenu", (evt) => {
          console.log("contextmenu", evt);
        });

        // 连线
        this.jsPlumb.bind("beforeDrop", (evt) => {
          let from = evt.sourceId;
          let to = evt.targetId;
          if (from === to) {
            this.$message.error("节点不支持连接自己");
            return false;
          }
          if (this.hasLine(from, to)) {
            this.$message.error("该关系已存在,不允许重复创建");
            return false;
          }
          if (this.hashOppositeLine(from, to)) {
            this.$message.error("不支持两个节点之间连线回环");
            return false;
          }
          this.$message.success("连接成功");
          return true;
        });

        // beforeDetach
        this.jsPlumb.bind("beforeDetach", (evt) => {
          console.log("beforeDetach", evt);
        });
        this.jsPlumb.setContainer(this.$refs.efContainer);
      });
    },
    // 加载流程图
    loadEasyFlow() {
      // 初始化节点
      for (var i = 0; i < this.data.nodeList.length; i++) {
        let node = this.data.nodeList[i];
        // 设置源点，可以拖出线连接其他节点
        this.jsPlumb.makeSource(
            node.id,
            lodash.merge(this.jsplumbSourceOptions, {})
        );
        // // 设置目标点，其他源点拖出的线可以连接该节点
        this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
        if (!node.viewOnly) {
          this.jsPlumb.draggable(node.id, {
            containment: "parent",
            stop: function (el) {
              // 拖拽节点结束后的对调
              console.log("拖拽结束: ", el);
            },
          });
        }
      }
      // 初始化连线
      for (var i = 0; i < this.data.lineList.length; i++) {
        let line = this.data.lineList[i];
        var connParam = {
          source: line.from,
          target: line.to,
          label: line.label ? line.label : "",
          connector: line.connector ? line.connector : "",
          anchors: line.anchors ? line.anchors : undefined,
          paintStyle: line.paintStyle ? line.paintStyle : undefined,
        };
        this.jsPlumb.connect(connParam, this.jsplumbConnectOptions);
      }
      this.$nextTick(function () {
        this.loadEasyFlowFinish = true;
      });
    },
    // 设置连线条件
    setLineLabel(from, to, label) {
      var conn = this.jsPlumb.getConnections({
        source: from,
        target: to,
      })[0];
      if (!label || label === "") {
        conn.removeClass("flowLabel");
        conn.addClass("emptyFlowLabel");
      } else {
        conn.addClass("flowLabel");
      }
      conn.setLabel({
        label: label,
      });
      this.data.lineList.forEach(function (line) {
        if (line.from == from && line.to == to) {
          line.label = label;
        }
      });
    },
    // 删除激活的元素
    deleteElement() {
      console.log(this.activeElement);
      if (this.activeElement.type === "node") {
        this.deleteNode(this.activeElement);
      } else if (this.activeElement.type === "line") {
        this.$confirm("确定删除所点击的线吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
            .then(() => {
              var conn = this.jsPlumb.getConnections({
                source: this.activeElement.sourceId,
                target: this.activeElement.targetId,
              })[0];
              this.jsPlumb.deleteConnection(conn);
            })
            .catch(() => {
            });
      }
    },
    // 删除线
    deleteLine(from, to) {
      this.data.lineList = this.data.lineList.filter(function (line) {
        if (line.from == from && line.to == to) {
          return false;
        }
        return true;
      });
    },
    // 改变连线
    changeLine(oldFrom, oldTo) {
      this.deleteLine(oldFrom, oldTo);
    },
    // 改变节点的位置
    changeNodeSite(data) {
      for (var i = 0; i < this.data.nodeList.length; i++) {
        let node = this.data.nodeList[i];
        if (node.id === data.nodeId) {
          node.left = data.left;
          node.top = data.top;
        }
      }
    },
    /**
     * 拖拽结束后添加新的节点
     * @param evt
     * @param nodeMenu 被添加的节点对象
     * @param mousePosition 鼠标拖拽结束的坐标
     */
    addNode(evt, nodeMenu, mousePosition) {
      var screenX = evt.originalEvent.clientX,
          screenY = evt.originalEvent.clientY;
      let efContainer = this.$refs.efContainer;
      var containerRect = efContainer.getBoundingClientRect();
      var left = screenX,
          top = screenY;
      // 计算是否拖入到容器中
      if (
          left < containerRect.x ||
          left > containerRect.width + containerRect.x ||
          top < containerRect.y ||
          containerRect.y > containerRect.y + containerRect.height
      ) {
        this.$message.error("请把节点拖入到画布中");
        return;
      }
      left = left - containerRect.x + efContainer.scrollLeft;
      top = top - containerRect.y + efContainer.scrollTop;
      // 居中
      left -= 85;
      top -= 16;
      var nodeId = this.getUUID();
      // 动态生成名字
      var origName = nodeMenu.name;
      var nodeName = origName;
      var index = 1;
      while (index < 10000) {
        var repeat = false;
        for (var i = 0; i < this.data.nodeList.length; i++) {
          let node = this.data.nodeList[i];
          if (node.name === nodeName) {
            nodeName = origName + index;
            repeat = true;
          }
        }
        if (repeat) {
          index++;
          continue;
        }
        break;
      }
      var node = {
        id: nodeId,
        name: nodeName,
        type: nodeMenu.type,
        left: left + "px",
        allshow: nodeMenu.allshow,
        alledit: nodeMenu.alledit,
        top: top + "px",
        fildList: nodeMenu.fildList,
        ico: nodeMenu.ico,
        state: "success",
        fildList: this.fieldLst,
        nodeType: nodeMenu.nodeType,
        parentId: 0,
      };
      console.log(this.fieldLst);
      /**
       * 这里可以进行业务判断、是否能够添加该节点
       */
      this.data.nodeList.push(node);
      this.$nextTick(function () {
        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions);
        this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions);
        this.jsPlumb.draggable(nodeId, {
          containment: "parent",
          stop: function (el) {
            // 拖拽节点结束后的对调
            console.log("拖拽结束: ", el);
          },
        });
      });
    },
    /**
     * 删除节点
     * @param nodeId 被删除节点的ID
     */
    deleteNode(activeElement) {
      this.$confirm("确定要删除节点" + activeElement.name + "吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
      })
          .then(() => {
            /**
             * 这里需要进行业务判断，是否可以删除
             */
            if (activeElement.isdelet) {
              this.$notify.error({
                title: "删除失败",
                message: "流程开始节点和结束节点不可删除",
              });
              return;
            }
            console.log(activeElement.nodeId);
            this.data.nodeList = this.data.nodeList.filter(function (node) {
              if (node.id === activeElement.nodeId.id) {
                console.log(node.id);
                console.log(activeElement.nodeId);
                // 伪删除，将节点隐藏，否则会导致位置错位
                // node.show = false
                return false;
              }
              return true;
            });
            this.$nextTick(function () {
              this.jsPlumb.removeAllEndpoints(activeElement.nodeId.id);
            });
          })
          .catch(() => {
          });
      return true;
    },
    clickNode(nodeId) {
      console.log(nodeId);
      if (nodeId.id === "nodeA" || nodeId.id === "nodeC") {
        this.activeElement.isdelet = true;
      } else {
        this.activeElement.isdelet = false;
      }
      this.activeElement.name = nodeId.name;
      this.activeElement.type = "node";
      this.activeElement.nodeId = nodeId;
      this.$refs.nodeForm.nodeInit(this.data, nodeId.id);
    },
    // 是否具有该线
    hasLine(from, to) {
      for (var i = 0; i < this.data.lineList.length; i++) {
        var line = this.data.lineList[i];
        if (line.from === from && line.to === to) {
          return true;
        }
      }
      return false;
    },
    // 是否含有相反的线
    hashOppositeLine(from, to) {
      return this.hasLine(to, from);
    },
    nodeRightMenu(nodeId, evt) {
      this.menu.show = true;
      this.menu.curNodeId = nodeId;
      this.menu.left = evt.x + "px";
      this.menu.top = evt.y + "px";
    },
    repaintEverything() {
      this.jsPlumb.repaint();
    },
    // 流程数据信息
    dataInfo() {
      this.flowInfoVisible = true;
      this.$nextTick(function () {
        this.$refs.flowInfo.init();
      });
    },
    // 加载流程图
    dataReload(data) {
      this.easyFlowVisible = false;
      this.data.nodeList = [];
      this.data.lineList = [];
      this.$nextTick(() => {
        data = lodash.cloneDeep(data);
        this.easyFlowVisible = true;
        this.data = data;
        this.$nextTick(() => {
          this.jsPlumb = jsPlumb.getInstance();
          this.$nextTick(() => {
            this.jsPlumbInit();
          });
        });
      });
    },
    // 模拟载入数据dataA
    dataReloadA() {
      this.dataReload(getDataA());
    },
    // 模拟载入数据dataB
    dataReloadB() {
      this.dataReload(getDataB());
    },
    // 模拟载入数据dataC
    dataReloadC() {
      this.dataReload(getDataC());
    },
    // 模拟载入数据dataD
    dataReloadD() {
      this.dataReload(getDataD());
    },
    // 模拟加载数据dataE，自适应创建坐标
    dataReloadE() {
      let dataE = getDataE();
      let tempData = lodash.cloneDeep(dataE);
      let data = ForceDirected(tempData);
      this.dataReload(data);
      this.$message({
        message: "力导图每次产生的布局是不一样的",
        type: "warning",
      });
    },
    zoomAdd() {
      if (this.zoom >= 1) {
        return;
      }
      this.zoom = this.zoom + 0.1;
      this.$refs.efContainer.style.transform = `scale(${this.zoom})`;
      this.jsPlumb.setZoom(this.zoom);
    },
    zoomSub() {
      if (this.zoom <= 0) {
        return;
      }
      this.zoom = this.zoom - 0.1;
      this.$refs.efContainer.style.transform = `scale(${this.zoom})`;
      this.jsPlumb.setZoom(this.zoom);
    },
    // 下载数据
    downloadData() {
      this.$confirm("确定要下载该流程数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
      })
          .then(() => {
            var datastr =
                "data:text/json;charset=utf-8," +
                encodeURIComponent(JSON.stringify(this.data, null, "\t"));
            var downloadAnchorNode = document.createElement("a");
            downloadAnchorNode.setAttribute("href", datastr);
            downloadAnchorNode.setAttribute("download", "data.json");
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
            this.$message.success("正在下载中,请稍后...");
          })
          .catch(() => {
          });
    },
    openHelp() {
      this.flowHelpVisible = true;
      this.$nextTick(function () {
        this.$refs.flowHelp.init();
      });
    },
  },
};
</script>
